<template>
    <div class="swiper">
        <div class="swiper-item" style="background-color: aqua;"></div>
        <div class="swiper-item" style="background-color: red;"></div>
        <div class="swiper-item" style="background-color: green;"></div>
        <div class="swiper-item" style="background-color: pink;"></div>
        <div class="swiper-item" style="background-color: blueviolet;"></div>
    </div>
    <div class="swiper-trigger">
        <div @click="turn('last')">上一个</div>
        <div @click="turn('next')">下一个</div>
    </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';

const pickIndex = ref(3)

const turn = (which)=>{
    if(which==='last'){
        pickIndex.value === 1 ? pickIndex.value = 5:pickIndex.value--
    }else{
        pickIndex.value === 5 ? pickIndex.value = 1:pickIndex.value++
    }
}
const itemSort = ()=>{
    const swiperItem = Array.from(document.querySelectorAll('.swiper-item'))
    const mainBoxWidth = window.getComputedStyle(document.querySelector('.swiper')).width.split('p')[0]-0
    const mainBoxheight = window.getComputedStyle(document.querySelector('.swiper')).height.split('p')[0]-0
    swiperItem.forEach((item,index)=>{
        item.style.width = (mainBoxWidth+160)/5+'px'
        item.style.height = mainBoxheight*0.9+'px'
        item.style.left = (mainBoxWidth/4-50)*index + 'px'
        if(index === pickIndex.value-1){
            item.style.zIndex = 3
        }else if(index === pickIndex.value - 2 ||index === pickIndex.value){
            item.style.zIndex = 2
        }else{
            item.style.zIndex = 1
        }
    })
    console.log(swiperItem)
    console.log(mainBoxWidth)
}

onMounted(()=>{
    itemSort()
})
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
div{
    box-sizing: border-box;
}
.swiper{
    width: 100%;
    height: 300px;
    padding: 0 20px;
    overflow: hidden;
}
.swiper-item{
    border: 1px solid white;
    height: 300px;
    position: absolute;
    color: white;
    font-weight: 600;
}
.swiper-item-top{
    z-index: 3;
}
.swiper-item-center{
    z-index: 2;
}
.swiper-item-buttom{
    z-index: 1;
}
.swiper-trigger{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}
.swiper-trigger div{
    display: inline-block;
    background-color: #ffbf00;
    color: white;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center;
    line-height: 50px;
    font-weight: 600;
    user-select:none;
}
/* .swiper-item{
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    margin: 20px;
    box-shadow: 0 0 5px 5px rgba(153, 219, 255, 0.3);
    background-color: rgba(0, 60, 255, 0.2);
}
.div{
    margin: 50px 0;
} */
</style>
